<template>
    <div class="wrap">
        <div class="container">
            <div class="products_block ">
                <div class="nav_position">
                    <span class="icon_home"></span>您的位置：
                    <div class="position_detail">
                        <nuxt-link to="/">
                            首页
                        </nuxt-link>
                        <span>></span>
                        <span>相关资讯</span>
                    </div>
                </div>
            </div>
            <div class="zixun_view">
                <!-- 列表开始 -->
                <div v-for="(item, index) in data.data" :key="index" class="zixun_list">
                    
                    <nuxt-link :to="'/news/' + item.id">
                        <div class="zixun_list_pic">
                            <img :src="item.image" />
                        </div>
                        <div class="zixun_img_bottom">
                            <div class="zixun_list_title">
                                <div class="title">{{ item.title }}</div>
                                <span>{{ item.time }}</span>
                            </div>
                            <div class="zixun_list_desc">{{ item.description }}</div>
                            <div class="zixun_list_more">
                                详情<span></span>
                            </div>
                        </div>
                    </nuxt-link>
                </div>
                <!-- 列表结束 -->
            </div>
            <!-- <div class="page">
                <div class="prev_page"></div>
                <div class="active">1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div class="next_page"></div>
            </div> -->
            <CustomPagination 
                :total="data.total" 
                :page.sync="queryParams.page" 
                :pageSize.sync="queryParams.pageSize" 
                @pagination="doLoadData"
                ></CustomPagination>
        </div>
    </div>
</template>

<script>
import api from "@/api/news"
export default {
    name: "New-List",
    data() {
        return {
            data: {
                data: [],
                total: 0
            },
            queryParams: {
                page: 1,
                pageSize: 6,
                keyword: ""
            }
        }
    },
    created(){
        this.doLoadData();
    },
    methods:{
        doLoadData() {
            var _this = this;
            api.GetPageList(_this.queryParams)
                .then(res => {
                    _this.data = res.data        
            });
        }
    }
};
</script>
